<template>
  <master title="答题记录">
    <div class="searchForm">
      <div class="searchFormInputs">
        <el-input class="searchFormInput" v-model="params.title" placeholder="按标题查找"></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
      <div class="searchFormBtn">
        <el-button type="danger" icon="el-icon-plus" @click="edit()">增加</el-button>
      </div>
    </div>
    <div class="el-table">
      <el-table :data="rows" stripe style="width: 100%">

        <el-table-column prop="spStudentsId" label="学号">
        </el-table-column>
        <el-table-column prop="students.name" label="姓名">
        </el-table-column>
        <el-table-column prop="createTimeString" label="提交时间">
        </el-table-column>
        <el-table-column label="操作" width="320">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="toAnswerInfo(scope.row)">查看</el-button>
            <el-button type="primary" size="mini" @click="ResultStudent(scope.row)">总结</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="el-pagination">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="params.pageNum"
        :page-sizes="[10, 100, 200, 300, 400]" :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </master>
</template>
<script type="text/javascript">
  (function (G) {
    G.vue({
      "usingComponents": {///引入组件
        "master": "/components/Master/Master"///母版组件
      },
      "enablePullDownRefresh": true
    }, {
      data: {
        loading: false,
        params: {
          pageSize: 10,
          pageNum: 1,
          practiceId: '',
          title: ""
        },
        total: 0,
        rows: [],
        visible: false,
        editForm: {},
        enterprise: []
      },
      methods: {

        sizeChange(pageSize) {
          this.params.pageSize = pageSize;
          this.params.pageNum = 1;
          this.getList();
        },
        currentChange(pageNum) {
          this.params.pageNum = pageNum;
          this.getList();
        },
        searchList() {
          this.params.pageNum = 1;
          this.getList();
        },

        toAnswerInfo(row) {

          G.$go('/pages/answerRecord/info?id=' + row.id + '&studentsNo=' + row.spStudentsId + '&name=' + row.students.name)

        },
        ResultStudent(row) {

          let practiceId = this.params.practiceId;
          // 构造请求 URL
          const url = new URL('http://localhost:8080/sp-course/createWordStudent');
          url.searchParams.append('practiceId', practiceId);
          url.searchParams.append('id', row.id);
          url.searchParams.append('spStudentsId', row.spStudentsId);
          url.searchParams.append('studentName', row.students.name);

          // 发送 GET 请求
          fetch(url.toString(), {
            method: 'GET', // 使用 GET 请求
            headers: {
              'Content-Type': 'application/json', // 可选，GET 请求通常不需要
            }
          })
            .then(response => {
              if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
              }
              return response.blob(); // 获取文件数据
            })
            .then(blob => {
              // 创建 Blob 对象的 URL
              const url = window.URL.createObjectURL(blob);
              // 创建一个 <a> 元素用于下载
              const a = document.createElement('a');
              a.href = url;
              // 设置文件名（可以根据后端返回的文件名动态设置）
              a.download = '课程数据.docx'; // 自定义文件名
              document.body.appendChild(a);
              // 触发下载
              a.click();
              // 移除临时的 <a> 元素
              document.body.removeChild(a);
              // 释放 Blob URL
              window.URL.revokeObjectURL(url);
              console.log('文件下载成功');
            })
            .catch(error => {
              console.error('发送失败:', error);
            });

        },
        getList() {
          this.loading = true;

          G.post('{JAVAURL}/sp-practice-record/page', this.params).then((res) => {
            this.loading = false;
            this.total = res.data.total;
            this.rows = res.data.rows;
          });

        }
      },
      mounted(query) {
        console.log("query",query);
        

        this.params.practiceId = query.practiceId;
        this.getList();
      }
    });
  })(Y)
</script>
<style scoped>

</style>